<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<body>
<canvas id="canvas" width= "900" height="600" style="border: 1px solid #000;"></canvas>

<script>
    //获取标签
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var minSec,sec,min,hou;
    //获取时间对象
    var nowDate = new Date();
    //获取毫秒
    minSec = nowDate.getMilliseconds();
    //需要把对应的毫秒,秒以及分钟数进行转化
    sec = nowDate.getSeconds() + minSec/1000;
    min = nowDate.getMinutes() +sec/60;
    hou = nowDate.getHours()%12+ min/60;
    var oHou = hou%12;//转换成12小时制
    var angle1 = 6*sec;//秒
    var angle2 = 6*min;//分
    var angle3 = oHou*30;//时
    setInterval(function () {
        // 清屏
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        /*
         * 外圆框
         * */
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.arc(250,250,230,0,360,false);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        /*
         * 时针刻度
         * */
        for(var i=0; i<12; i++){
            //设置旋转环境
            ctx.save();
            // 设置时针的样式
            ctx.lineWidth=7;
            ctx.strokeStyle="black";
            //设置异次元空间的原点
            ctx.translate(250,250);
            //设置旋转角度
            ctx.rotate(30*(i+1)*Math.PI/180);

            ctx.beginPath();
            ctx.moveTo(0,-170);
            ctx.lineTo(0,-190);
            //绘图
            ctx.stroke();

            //将旋转之后的元素放回原画布
            ctx.closePath();
            ctx.restore();
        }
        /*
         * 分针刻度
         * */
        for(var i=0; i<60; i++){
            //设置旋转环境
            ctx.save();
            // 设置时针的样式
            ctx.lineWidth=4;
            ctx.strokeStyle="black";
            //设置异次元空间的原点
            ctx.translate(250,250);
            //设置旋转角度
            ctx.rotate(6*(i+1)*Math.PI/180);
            ctx.beginPath();
            ctx.moveTo(0,-180);
            ctx.lineTo(0,-190);
            //绘图
            ctx.stroke();
            //将旋转之后的元素放回原画布
            ctx.closePath();
            ctx.restore();
        }
        /*
        * 时针
        * */
        ctx.save();
        ctx.lineWidth=8;
        ctx.strokeStyle="black";
        //设置旋转原点
        ctx.translate(250,250);
        //设置旋转角度
        ctx.rotate(angle3*Math.PI/180);
        angle3 +=1/120;
        if(angle3>=360){
            angle3 = 0;
        }
        ctx.beginPath();
        ctx.moveTo(0,10);
        ctx.lineTo(0,-157);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        /*
         * 分针
         * */
        ctx.save();
        ctx.lineWidth=5;
        ctx.strokeStyle="black";
        //设置旋转原点
        ctx.translate(250,250);
        //设置旋转角度
        ctx.rotate(angle2*Math.PI/180);
        angle2 +=0.1;
        if(angle2>=360){
            angle2 = 0;
        }
        ctx.beginPath();
        ctx.moveTo(0,10);
        ctx.lineTo(0,-165);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        /*
         * 秒针
         * */
        ctx.save();
        ctx.lineWidth=2;
        ctx.strokeStyle="red";
        //设置旋转原点
        ctx.translate(250,250);
        //设置旋转角度
        ctx.rotate(angle1*Math.PI/180);
        angle1 +=6;
        if(angle1>=360){
            angle1 = 0;
        }
        ctx.beginPath();
        ctx.moveTo(0,10);
        ctx.lineTo(0,-180);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    },1000);



</script>
</body>
</html>